/*
 * @Author: Guojian Wang 1085844536@qq.com
 * @Date: 2022-12-09 02:58:01
 * @LastEditTime: 2022-12-17 20:51:58
 * @LastEditors: Guojian Wang 1085844536@qq.com
 * @FilePath: \CloundMusic\pages\video\video.js
 * @Description:
 */
import request from '../../utils/request';

// pages/video/video.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        // 导航的标签数据
        videoGroupList: [],
        // 导航的标识
        navId: '',
        // 视频列表数据
        videoList: [],
        // 视频 id 标识
        videoId: '',
        // 记录 video 播放时长
        videoUpdateTime: [],
        // 标识下拉刷新是否被触发
        isTriggered: false,
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        // 获取导航数据
        this.getVideoGroupListData();
    },

    // 获取导航数据
    async getVideoGroupListData() {
        let videoGroupListData = await request('/video/group/list');
        this.setData({
            videoGroupList: videoGroupListData.data.slice(0, 14),
            navId: videoGroupListData.data[0].id,
        });
        // 获取视频列表数据
        this.getVideoList(this.data.navId);
    },

    /**
     *  获取视频列表数据
     * @param {Number} navId navId
     */
    async getVideoList(navId) {
        if (!navId) {
            return;
        }
        let videoListData = await request('/video/group', { id: navId });
        let index = 0;
        let videoList = videoListData.datas.map((item) => {
            item.id = index++;
            return item;
        });
        for (const element of videoList) {
            let videoUrlInfo = await request('/video/url', {
                id: element.data.vid,
            });
            element.videoUrlInfo = videoUrlInfo;
        }
        // 关闭消息提示框
        wx.hideLoading();

        this.setData({
            videoList,
            // 关闭下拉刷新
            isTriggered: false,
        });
    },

    /**
     * 点击切换导航的回调
     * @param {Object} event 事件对象
     */
    changeNav(event) {
        // 通过 id 向 event 传参的时候如果传的是 number 会自转换成 string
        let navId = event.currentTarget.id;
        // let navId = event.currentTarget.dataset.id;
        this.setData({
            navId: navId >>> 0,
            videoList: [],
        });
        // 显示正在加载
        wx.showLoading({
            title: '正在加载',
        });
        // 动态获取当前导航对应的导航数据
        this.getVideoList(this.data.navId);
    },

    /**
     * 点击播放/继续播放的回调
     */
    handlePlay(event) {
        /**
         * 需求：
         *  1.在点击播放的事件中需要找到上一个播放的视频
         *  2.在播放新的视频之前关闭上一个正在播放的视频
         * 关键
         *  1.如何找到上一个视频实例对象
         *  2.如何确认点击播放的视频和正在播放的视频不是同一个视频
         */

        let vid = event.currentTarget.id;
        // 关闭上一个播放的视频
        // this.vid !== vid && this.videoContext && this.videoContext.stop();
        // this.vid = vid;

        // 更新 data 中 videoId 状态数据
        this.setData({
            videoId: vid,
        });

        // 创建控制 video 标签的实例对象
        this.videoContext = wx.createVideoContext(vid);
        // 判断当前的视频之前是否播放过，是否有播放记录，如果有，跳转至指定的播放位置
        let { videoUpdateTime } = this.data;
        let videoItem = videoUpdateTime.find((item) => item.vid === vid);
        if (videoItem) {
            this.videoContext.seek(videoItem.currentTime);
        }
        this.videoContext.play();
    },

    /**
     * 视频播放结束调用的回调
     * @param {Object} event 事件对象
     */
    handleEnded(event) {
        // 移除记录播放时长数组 中当前视频的对象
        let { videoUpdateTime } = this.data;
        videoUpdateTime.splice(
            videoUpdateTime.findIndex(
                (item) => item.vid === event.currentTarget.id
            ),
            1
        );
        this.setData({
            videoUpdateTime,
        });
    },

    /**
     * 监听视频播放进度的回调
     * @param {Object} event 事件对象
     */
    handleTimeUpdate(event) {
        let videoTimeObj = {
            vid: event.currentTarget.id,
            currentTime: event.detail.currentTime,
        };
        let { videoUpdateTime } = this.data;
        /**
         * 思路：判断记录播放时长的 videoUpdateTime 数组中是否有当前视频的播放记录
         *  1.如果有，在原有的播放记录中修改播放时间为当前的播放时间
         *  2.如果没有，需要在数组中添加当前视频的播放对象
         */
        let videoItem = videoUpdateTime.find(
            (item) => item.vid === videoTimeObj.vid
        );
        if (videoItem) {
            // 之前有
            videoItem.currentTime = videoTimeObj.currentTime;
        } else {
            // 之前没有
            videoUpdateTime.push(videoTimeObj);
        }
        this.setData({
            videoUpdateTime,
        });
    },

    /**
     * 自定义下拉刷新的回调：scroll-view
     */
    handleRefresher() {
        // 再次发请求，获取最新的视频列表数据
        this.getVideoList(this.data.navId);
    },

    /**
     * 自定义上拉触底的回调 scroll-view
     */
    handleToLower() {
        console.log('first');
        // 数据分页：1.后端分页  2.前端分页
    },

    /**
     * 跳转至搜索界面
     */
    toSearch() {
        wx.navigateTo({
            url: '/pages/search/search',
        });
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
});
